﻿///<reference path="../../scripts/jquery-1.4.4.min.js" />
///<reference path="../../scripts/kooboo/kooboo.form.js" />
///<reference path="../../scripts/kooboo/kooboo.mvcvalidation.js" />

$(function () {

    $(".remove-custom-size").live("click", function (e) {
        e.preventDefault();
        $(this).parents("tr:eq(0)").remove();
        return false;
    });

    $(".add-custom-field").click(function (e) {
        var prefix = "ImageSettings.CustomSizes[" + len + "]";
        var name_input = $("<input></input>").attr("type", "text").addClass("short").attr("name", prefix + ".Name");
        var th = $("<th></th>").append(name_input);

        var index_hidden = $("<input></input>").attr("type", "hidden").val(len).attr("name", "ImageSettings.CustomSizes.index");
        var height_input = $("<input></input>").attr("type", "text").attr("style", "width: 90px;").attr("name", prefix + ".Height");
        var span = $('<span style="margin-right: 4px; line-height: 20px;" class="left">X</span>');
        var width_input = $("<input></input>").attr("type", "text").attr("style", "width: 90px;").attr("name", prefix + ".Width");
        var remove_button = $('<a href="#" class="remove remove-custom-size" title="Remove"><img src="/Areas/Commerce/Content/images/icons/remove.png" alt="Remove" /></a>');

        var td = $("<td></td>").append(index_hidden).append(height_input).append(span).append(width_input).append(remove_button);

        var tr = $("<tr></tr>").append(th).append(td);

        $("#custom-size-container").append(tr);

        len++;
    });

    $("form").submit(function () {
        $(this).ajaxPost({
            success: function () {
                showMessage(successMessage);
            },
            validate: function () {
               return $("#imageSize").mvcvalidate();
            }
        });
        return false;
    });
});
